import { createBehavior, createResource } from '@inbiz/core';
import {
  createComponentStyleSchema,
  createControllerSchema,
  createDecoratorStyleSchema,
  createEmptySchema,
  createInbizSchema,
} from '@inbiz/setters';
import { PageBreadcrumb as LocalePageBreadcrumb } from './locale';
/**
 * 1.属性的默认值:defaultProps
 * 2.属性的json数据
 * */

export const defaultProps = {
  fontSize: 14,
  showIndex: true,
  isJumpUrl: true,
};
export const decoratorProps = {
  style: {
    padding: '10px 20px 10px 20px',
  },
};

export const PageBreadcrumb = createInbizSchema({
  attribute: {
    ...createEmptySchema({
      fontSize: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': 'NumberPicker',
        'x-component-props': {
          addonAfter: 'px',
          min: 1,
        },
      },
      showIndex: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
      },
      isJumpUrl: {
        type: 'number',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-component-props': {
          checked: true,
        },
      },
    }),
  },
  style: {
    ...createComponentStyleSchema(),
    ...createDecoratorStyleSchema(),
  },
  controller: createControllerSchema({
    events: [
      {
        name: "onClick",
        label: "点击",
      },
    ]
  })
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'PageBreadcrumb',
  selector: (node) => node.props['x-component'] === 'PageBreadcrumb',
  designerLocales: LocalePageBreadcrumb,
  designerProps: {
    propsSchema: PageBreadcrumb,
  },
});

export const Resource = createResource({
  icon: 'Breadcrumb',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'sting',
        title: {
          value: 'PageBreadcrumb.title'
        },
        'x-decorator': 'Container',
        'x-component': 'PageBreadcrumb',
        'x-component-props': defaultProps,
        'x-decorator-props': decoratorProps,
      },
    },
  ],
});
